/*
  学习目标：useEffect的综合写法
  建议：不同的逻辑，应该划分到不同的 useEffect 去写
  优点： 后期维护更容易
 
*/
import React, { useState, useEffect } from 'react';

export default function App() {
  const [isShow, setIsShow] = useState(true);

  return (
    <div>
      <button onClick={() => setIsShow(!isShow)}>点我切换子组件</button>
      {isShow && <Child></Child>}
    </div>
  );
}

function Child() {
  // 建议：不同的逻辑，应该划分到不同的 useEffect 去写
  // 倒计时业务
  useEffect(() => {
    console.log('我是Child组件，被创建了');
    let timer = setInterval(() => {
      console.log('setInterval执行了 -----> ');
    }, 1000);

    return () => {
      // 页面卸载时会执行的代码
      console.log('我是Child组件，被销毁了');
      clearInterval(timer);
    };
  }, []);

  // 绑定事件业务
  useEffect(() => {
    const fn = () => {
      console.log('浏览器窗口大小被调整了');
    };
    window.addEventListener('resize', fn);
    return () => {
      window.removeEventListener('resize', fn);
    };
  }, []);
  return <div>我是Child组件</div>;
}
